<template>
  <div>
    <el-card class="box-card" style="margin:20px">
      <div slot="header" class="clearfix">
        <el-form :inline="true">
          <el-form-item label="名称" style="margin-bottom:0px;">
            <el-input v-model="searchName" placeholder="输入名称" />
          </el-form-item>
          <el-form-item style="margin-bottom:0px;">
            <el-button type="primary" icon="el-icon-search" @click="getDictionaryList">查询</el-button>
            <el-button type="primary" icon="el-icon-edit" @click="add">新增</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table v-loading="loading" :data="tableData" style="width: 100%">
        <el-table-column
          prop="name"
          label="字典名称"
          min-width="35%"
        />
        <el-table-column
          prop="code"
          label="字典编码"
          min-width="35%"
        />
        <el-table-column
          prop="systemName"
          label="所属系统"
          min-width="35%"
        />
        <el-table-column
          prop="updateTime"
          label="更新时间"
          min-width="35%"
        />
        <el-table-column
          align="center"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-setting"
              @click="editValue(scope.$index, scope.row.id)"
            >
              管理值
            </el-button>
            <el-button
              size="mini"
              type="warning"
              icon="el-icon-edit"
              @click="update(scope.$index, scope.row)"
            >
              修改
            </el-button>
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              @click="remove(scope.$index, scope.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block" style="float:right;margin:20px">
        <el-pagination
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
      <div>
        <el-dialog title="字典信息" :visible.sync="dialogFormVisible">
          <el-form ref="dictForm" label-width="100px" size="mini" :model="dictForm" :rules="rules">
            <el-form-item label="字典名称" prop="dictionaryName">
              <el-input
                v-model="dictForm.dictionaryName"
              />
            </el-form-item>
            <el-form-item label="字典编码" prop="dictionaryCode">
              <el-input
                v-model="dictForm.dictionaryCode"
              />
            </el-form-item>
            <el-form-item label="所属系统" prop="systemId">
              <el-select
                v-model="dictForm.systemId"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in systemOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveOrUpdate">确 定</el-button>
          </div>
        </el-dialog>
        <el-dialog title="字典值管理" :visible.sync="dialogDictionaryVisible">
          <div style="float:right">
            <el-button size="small" type="primary" @click="addTableRow">添加</el-button>
          </div>
          <el-table
            :data="tableDicData"
            style="width:100%"
          >
            <el-table-column label="名称">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.name"
                />
              </template>
            </el-table-column>
            <el-table-column label="代码">
              <template
                slot-scope="scope"
              >
                <el-input
                  v-model="scope.row.code"
                />
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="操作"
            >
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="danger"
                  icon="el-icon-delete"
                  @click="removeTableRow(scope.$index, scope.row)"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogDictionaryVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveDistionaryValue">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      tableDicData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      dialogFormVisible: false,
      dictForm: {
        dictionaryName: '',
        dictionaryCode: '',
        systemId: ''
      },
      rules: {
        dictionaryName: [
          { required: true, message: '请输入字典名称', trigger: 'blur' }
        ],
        dictionaryCode: [
          { required: true, message: '请输入字典编码', trigger: 'blur' }
        ],
        systemId: [
          { required: true, message: '请选择业务系统', trigger: 'change' }
        ]
      },
      updateDictionaryId: 0,
      dialogDictionaryVisible: false,
      systemOptions: [],
      searchName: '',
      loading: false
    }
  },
  mounted() {
    this.getDictionaryList()
    this.getSystemOptions()
  },
  methods: {
    getDictionaryList() {
      this.loading = true
      var params = {
        'pageSize': this.pageSize,
        'pageNum': this.currentPage,
        'name': this.searchName
      }
      this.$axios.get(this.baseProjectUrl + '/dictionary/page', {
        params
      }).then(res => {
        this.tableData = res.data.data.records
        this.total = parseInt(res.data.data.total)
        this.loading = false
      }).catch(() => {
        this.loading = false
        this.$message.error('获取业务系统列表失败')
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1
      this.getDictionaryList()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getDictionaryList()
    },
    add() {
      if (this.$refs['dictForm'] !== undefined) {
        this.$refs['dictForm'].resetFields()
      }
      this.$set(this.dictForm, 'dictionaryName', '')
      this.$set(this.dictForm, 'dictionaryCode', '')
      this.$set(this.dictForm, 'systemId', '')
      this.updateDictionaryId = 0
      this.dialogFormVisible = true
    },
    update(index, row) {
      if (this.$refs['dictForm'] !== undefined) {
        this.$refs['dictForm'].resetFields()
      }
      this.$set(this.dictForm, 'dictionaryName', row.name)
      this.$set(this.dictForm, 'dictionaryCode', row.code)
      this.$set(this.dictForm, 'systemId', row.systemId)
      this.updateDictionaryId = row.id
      this.dialogFormVisible = true
    },
    saveOrUpdate() {
      this.$refs['dictForm'].validate((valid) => {
        if (valid) {
          var params = {
            'name': this.dictForm.dictionaryName,
            'code': this.dictForm.dictionaryCode,
            'systemId': this.dictForm.systemId
          }
          var url = this.baseProjectUrl + '/dictionary/create'
          if (this.updateDictionaryId != 0) {//eslint-disable-line
            url = this.baseProjectUrl + '/dictionary/update'
            this.$set(params, 'id', this.updateDictionaryId)
          }
          this.$axios.post(url, params, {
            headers: {
              'Content-Type': 'application/json'
            }
          }).then(res => {
            this.$message.success('操作成功~')
            this.dialogFormVisible = false
            this.getDictionaryList()
          }).catch(() => {
            this.$message.error('操作失败！')
          })
        } else {
          this.$message.error('请正确输入')
          return false
        }
      })
    },
    remove(index, row) {
      this.$confirm('此操作将永久删除该字典, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        this.$axios.delete(this.baseProjectUrl + '/dictionary/remove', {
          params: {
            id: row.id
          }
        }).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getDictionaryList()
        }).catch(() => {
          this.$message({
            type: 'error',
            message: '删除失败'
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    editValue(index, id) {
      this.updateDictionaryId = id
      var params = {
        'dictionaryId': id
      }
      this.$axios.get(this.baseProjectUrl + '/content/findByDictionaryId', {
        'params': params
      }).then(res => {
        this.tableDicData = res.data.data
        this.dialogDictionaryVisible = true
      }).catch(() => {
        this.$message.error('获取字典内容失败')
      })
    },
    addTableRow() {
      var newValue = {
        name: '',
        code: ''
      }
      this.tableDicData.push(newValue)
    },
    removeTableRow(index, row) {
      this.tableDicData.splice(index, 1)
    },
    saveDistionaryValue() {
      for (var i = 0; i < this.tableDicData.length; i++) {
        this.$set(this.tableDicData[i], 'dictionaryId', this.updateDictionaryId)
      }
      var params = this.tableDicData
      this.$axios.post(this.baseProjectUrl + '/content/saveContent', params, {
        headers: {
          'Content-Type': 'application/json'
        }
      }).then(res => {
        this.$message.success('保存成功')
        // this.editValue(0, this.updateDictionaryId)
        this.dialogDictionaryVisible = false
      }).catch(() => {
        this.$message.error('保存失败')
      })
    },
    getSystemOptions() {
      this.$axios.get(this.basePortalUrl + '/system/findAll'
      ).then(res => {
        this.systemOptions = res.data.data
      }).catch(() => {
        this.$message.error('获取业务系统失败')
      })
    }

  }
}
</script>
